Motion on Websites Challenges

These challenges are meant to help you gain practice identifying potential issues. The first challenge is suitable for everyone, while the following challenges do require a bit of development skill to complete.

Whether you write code or not, the solution videos are worth viewing to build an understanding of the differences in how a web page can be presented to the user.

🛠️ Challenge: Identify Accessibility Issues Related to Motion

Your challenge is to identify potential accessibility issues related to motion on the CampSpots events page.

Visit the CampSpots Events page (”Plan Your Trip” then “Events” from the menu), then take a couple of minutes to write down your reflection on the following questions for each example:

• What would be the impact on people when things are moving/animating on the screen?
• How should these issues be addressed?

🛠️ Solution: Identify Accessibility Issues Related to Motion

CampSpots

The first issue is the video running in the background. If you inspect the video in DevTools you will also notice that it contains the autoplay and loop controls.

<header class="page-header">
  <div class="header-video">
    <video muted loop autoplay>...</video>
  </div>

<header class="page-header">
  <div class="header-video">
    <video muted loop autoplay>...</video>
  </div>

This issue should be addressed by removing autoplay and updating the controls to be visible.

Solving Motion Issues

If the site you have to implement is media or movement heavy, it’s important to include the relevant WCAG criteria as requirements.

That the prefers-reduced-motion media feature now has strong browser support, so there is no excuse not to use it!

Identify any potentially triggering motion effects on your site. You can then use CSS and JavaScript to provide a version of your site that respects your user’s preferences.

🛠️ Challenge: Add Prefers Reduced Motion to a Video

Note: This challenge requires knowledge of HTML, CSS, and JavaScript in order to solve. If you aren’t a developer, it’s still worth watching the difference in the solution video!

As we’ve seen, the CampSpots Events page has a video that is set to autoplay for everyone by default.

Your challenge is to write a JavaScript function that will conditionally apply the autoplay attribute to the video player based on whether or not the user has indicated they want to reduce motion.

You can work with a local version of the application or update the code in CodePen.

Hints: Check out the matchMedia docs on MDN for examples on how JavaScript checks if a media query is matched, as well as the CSSWG docs for prefers-reduced-motion.

🛠️ Solution: Add Prefers Reduced Motion to a Video

The CSS media query refers-reduced-motion is used to detect if the user has set an operating system preference to minimize the amount of animation or motion it uses.

Using the JavaScript matchMedia function along with prefers-reduced-motion, we can can determine if the user has set the preference and respond accordingly in the right context.

Remember that a value no-preference indicates that the user has made no preference in the underlying operating system. This keyword value evaluates as false in the boolean context.

The opposite value is reduce, which indicates that the user has set the preference at the operating system level.

Passing the prefers-reduced-motion: no-preference into a call to matchMedia will return matches if the motion preference has not been set by the user. If there is no motion preference set, then the autoplay attribute can be added to the user. Otherwise, it should be removed.

Here’s the JavaScript code for a solution:

const video = document.querySelector('video')

var motionQuery = matchMedia('(prefers-reduced-motion: no-preference)');

function handleReduceMotionChanged() {
    if (motionQuery.matches) {
        /* standard motion */
        video.setAttribute('autoplay', '')
    } else {
        /* do not show motion */
        video.removeAttribute('autoplay')
    }
}

motionQuery.addEventListener("change", handleReduceMotionChanged)

handleReduceMotionChanged(); // trigger once on load

const video = document.querySelector('video')

var motionQuery = matchMedia('(prefers-reduced-motion: no-preference)');

function handleReduceMotionChanged() {
    if (motionQuery.matches) {
        /* standard motion */
        video.setAttribute('autoplay', '')
    } else {
        /* do not show motion */
        video.removeAttribute('autoplay')
    }
}

motionQuery.addEventListener("change", handleReduceMotionChanged)

handleReduceMotionChanged(); // trigger once on load

You can take a look at the finished solution in the exercises/exercise3-reduced-motion directory of the project or on a completed CodePen.

🛠️ Challenge: Add Prefers Reduced Motion to an SVG

Note: This challenge requires knowledge of HTML and CSS in order to solve. If you aren’t a developer, it’s still worth watching the difference in the solution video!

Your challenge is to remove the spinning animation from the sun SVG.

🛠️ Solution: Add Prefers Reduced Motion to an SVG

This is the current state of the CSS:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.page-events svg {
      animation: rotation 10s linear infinite;
 }

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.page-events svg {
      animation: rotation 10s linear infinite;
 }

We can add prefers-reduced-motion and prevent the SVG from being animated based on the preferences of the user using a CSS Media Query:

@media (prefers-reduced-motion: reduce) {
    .animation {
        animation: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .animation {
        animation: none;
        transition: none;
    }
}

Once we make those changes we can test that it works by turning on and off the reduced motion preference in our operating system settings.